<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="/stylesheets/common.css">
    <style>
        img {
            border-radius: 50%;
        }

        .pic {
            position: relative;
        }

        .inpimg {
            position: absolute;
            border-radius: 50%;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <nav class="navbar bg-primary">
        <div class="container-fluid">
            <span class="navbar-brand mb-0 h5" style="color: white;">注册</span>
        </div>
    </nav>
    <div class="container mt-4">
        <form class="row g-3 px-3 needs-validation" id="registerForm" novalidate>
            <div class="d-flex justify-content-center pic">
                <img class="img" src="./images/1.webp" width="100px" alt="">
                <input type="file" id="inpimg" class="inpimg" style="opacity: 0;" placeholder="点击上传头像">
            </div>
            <div class="col-md-4">
                <div class="input-group has-validation">
                    <input type="text" class="form-control" placeholder="请输入姓名" id="inpname" required>
                    <div class="invalid-feedback">
                        请输入姓名
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="input-group has-validation">
                    <input type="del" class="form-control" placeholder="请输入手机号" id="inpnum" required>
                    <div class="invalid-feedback">
                        请输入手机号
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="input-group has-validation">
                    <input type="password" class="form-control" placeholder="请输入密码" id="inppwd" required>
                    <div class="invalid-feedback">
                        请输入密码
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="input-group has-validation">
                    <input type="password" class="form-control" placeholder="请确认密码" id="checkpwd" required>
                    <div class="invalid-feedback" id="checkpwd_msg">
                        请确认密码
                    </div>
                </div>
            </div>
            <button class="btn btn-primary" id="registerbtn" type="submit">确认注册</button>
        </form>
    </div>
    <!-- <script src="/javascripts/register.js"></script> -->
    <script>
        let imgPath = null;
        let pwd = null;
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (() => {
            'use strict'
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            const forms = document.querySelectorAll('.needs-validation')
            // 判断两次密码是否一致
            $('#checkpwd').on('input', () => {
                let form = forms[0];
                if (form.inppwd.value == form.checkpwd.value) {
                    form.checkpwd.setCustomValidity('');
                } else {
                    form.checkpwd.setCustomValidity('两次密码必须一致.');
                    $('#checkpwd_msg').html(form.checkpwd.validationMessage);
                }
            })
            // 注册的请求
            function register() {
                $.ajax({
                    method: 'post',
                    url: 'http://localhost:3000/user/register',
                    data: {
                        "username": $('#inpname').val(),
                        "password": $('#inppwd').val(),
                        "phone": $('#inpnum').val(),
                        "img": imgPath
                    },
                    success: function (data) {
                        console.log(data)
                        if (data.code == 0) {
                            alert('注册成功');
                            location.href = 'login.html'
                        } else {
                            alert('注册失败:' + data.msg)
                        }
                    },
                    error: function (data) {
                        console.log('注册失败' + JSON.stringify(e))
                    }
                })

            }
            // 上传图片的请求
            function uploadimg() {
                let fd = new FormData();
                fd.append('image', $('#inpimg')[0].files[0]);
                $.ajax({
                    method: 'post',
                    url: 'http://localhost:3000/upload/image',
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        console.log(data)
                        imgPath = data.path;
                        $('#inpimg').css('opacity', 0)
                        $('.img').attr('src', data.path);
                    },
                    error: function (e) {
                        console.log(JSON.stringify(e));
                    }
                })
            }

            // 上传图片
            $('#inpimg').change(uploadimg);
            // Loop over them and prevent submission

            Array.from(forms).forEach(form => {
                form.addEventListener('submit', event => {
                    event.preventDefault();
                    form.classList.add('was-validated')
                    if (!form.checkValidity()) {
                        event.stopPropagation()
                        console.log('err')
                        return;
                    }
                    register();
                }, false)
            })
        })()
    
    </script>
</body>

</html>